<template>
  <div style="height: 100%; width: 100%">
    <div class="radarCanvas" style="height: 100%; width: 100%"></div>
  </div>
</template>

<script>
export default {
  name: "radar",
  props: {
    radarData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    addData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    radarData(val) {
      this.getRadar(val);
    },
    addData(val) {
      this.getRadar(this.radarData, val);
    },
  },
  mounted() {
    this.getRadar(this.radarData);
  },
  methods: {
    getRadar(val, addData) {
      console.log(11, val);
      let maxValue = Math.max.apply(null, val.parentData);

    let value = [25, 10, 30, 15, 20]
    let arr = []
    val.parentData.forEach((item,index) => {
        value.forEach((its,idx) => {
            if (index == idx) {
                arr.push(Number((Number(item)/Number(its)*20).toFixed(2)))
            }
        })
    });
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".radarCanvas"));
      let option = {
        color: ["#f4c178", "#f3707c"],
        legend: {
          show: true,
          top: "bottom",
          itemGap: 20,
          itemHeight: 8,
          textStyle: {
            color: "#636d9a",
            fontSize: 12,
          },
          data: [
            {
              name: "权重",
              // icon: "image:///PC_budgetCMS/static/image/rect1.png",
              icon: "image:///static/image/rect1.png",
              // icon: "triangle",
              // color:'#6a82fd'
            },
            {
              name: val.parentName,
              // icon: "image:///PC_budgetCMS/static/image/rect1.png",
              // icon: "image:///static/image/rect2.png"
              icon: "circle",
              // color:'#f3707c'
            },
          ],
        },
        tooltip: {
          trigger: "item",
        },
        radar: {
          name: {
            textStyle: {
              color: "#343a45",
            },
          },
          splitNumber: 4,
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                //  '#d8ecff',
                //   '#d8ecff',
                //    '#d8ecff',
                //     '#d8ecff',
                    'rgba(82, 174, 253, .5)',
                    'rgba(82, 174, 253, .4)',
                    'rgba(82, 174, 253, .2)',
                    'rgba(82, 174, 253, .1)'
                // "rgba(114, 172, 209, 0.1)",
                // "rgba(114, 172, 209, 0.1)",
                // "rgba(114, 172, 209, 0.1)",
                // "rgba(114, 172, 209, 0.1)",
                // "rgba(114, 172, 209, 0.1)",
              ], //圆环颜色
              shadowColor: "aqua", // 圆颜色
              shadowBlur: 10,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#f4c178"],
            },
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: "#fff",
            },
          },
          indicator: [
            { name: "收入情况", max: 40 },
            { name: "用户质态", max: 40 },
            { name: "规模发展", max: 40 },
            { name: "市场格局", max: 40 },
            { name: "双轮驱动", max: 40 },
          ],
        },
        series: [
          {
            type: "radar",
            symbol: "none",
            lineStyle: {
              normal: {
                width: 0.8,
              },
            },
            data: [
              {
                value: [25, 10, 30, 15, 20],
                name: "权重",
                lineStyle: {
                  normal: {
                    color: "#f4c178",
                    type: "dashed",
                  },
                },
                areaStyle: {
                  normal: {
                    opacity: 0,
                  },
                },
              },
              {
                value: arr,
                lineStyle: {
                  color: "#f3707c",
                },
                areaStyle: {
                  normal: {
                    type: "default",
                    color: "#f3707c",
                    opacity: 0.4,
                  },
                },
                name: val.parentName,
              },
            ],
          },
        ],
      };
      if (addData && addData.data) {
        option.color.push("#6a82fd");
        option.legend.data.push({
          name: addData.areaName,
          // icon: "image:///PC_budgetCMS/static/image/rect1.png",
          icon: "circle",
        });
        option.series[0].data.push({
          value: addData.data,
          lineStyle: {
            color: "#6a82fd",
          },
          areaStyle: {
            normal: {
              type: "default",
              color: "#6a82fd",
              opacity: 0.4,
            },
          },
          name: addData.areaName,
        });
      }

      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>
